<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>box-shadow盒子阴影</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: burlywood;

      /* 1.水平偏移 正右  负左
         2.垂直偏移 正下 负上

         3.阴影的模糊度  只能是正值
         4.阴影的扩展大小  可以为负值 (如果想让你的阴影变得更大

         5.颜色 rgba() rgba(0,0,0,.5)
      */
      /*box-shadow: 10px!*水平偏移*! 10px!*垂直偏移*! 10px!*模糊度*! 10px!*阴影的扩展大小*! #000!*颜色*!;*/

      /* 模糊度和阴影扩展大小的区别在于,
         模糊度并不会改变阴影的大小,
         但是阴影的扩展大小会

         尝试分别改变下面的模糊度 和 阴影扩展大小, 你可以明显看到上面的结论
       */
      box-shadow: 310px/*水平偏移*/ 310px/*垂直偏移*/ 0px/*模糊度*/ 10px/*阴影的扩展大小*/ #000/*颜色*/;

      /* inset反向阴影,即阴影不是朝向元素外 而是朝向元素内部(凹槽效果) */

      /* 可以设置多个阴影 */
      /*box-shadow:10px 10px 10px rgba(0,0,0,.4) inset, -20px -20px 10px rgba(0,0,0,.4);*/
    }
  </style>
</head>

<body>
<h2> 不会占据位置 </h2>
<div class="box1 active"></div>

</body>

</html>
